<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .register-form {
            background-color: #fff;
            max-width: 300px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .register-form h2 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* Make sure padding doesn't affect width */
        }
        .form-group input[type="submit"] {
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form-group input[type="submit"]:hover {
            background-color: #4cae4c;
        }
        .msg {
            color: red;
            margin-bottom: 15px;
        }
        span{
            color: red;
        }
    </style>
    <script>
        function validateForm() {
            // 将名为registerForm的表单中名为username的输入字段的值赋给变量
            var username = document.forms["registerForm"]["username"].value;
            var password = document.forms["registerForm"]["password"].value;
            var password1 = document.forms["registerForm"]["password1"].value;

            var msg = document.querySelector('.msg');
            msg.textContent = '';

            // 1. 两次密码一致
            if (password !== password1) {
                msg.textContent = '两次输入的密码不一致！';
                return false;
            }

            // 2. 用户名长度必须在6-10位之间
            if (!/^.{6,10}$/.test(username)) {
                msg.textContent = '用户名长度必须在6-10位之间！';
                return false;
            }

            // 3. 密码必须是数字和字母的组合，6-10位，不能包含其他特殊符号
            if (!(/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{6,10}$/).test(password)) {
                msg.textContent = '密码必须是数字和字母的组合，长度在6-10位之间！';
                console.log(password);
                return false;
            }



            return true; // If all validations pass
        }
    </script>
</head>
<body>
<div class="register-form">
    <h2>用户注册</h2>
    <form name="registerForm" action="/springMVC_login/user/userRegister" method="post" onsubmit="return validateForm()">
        <div class="form-group">

            <label for="username">用户名:<span>${requestScope.errors.username}</span></label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">
        </div>
        <div class="form-group">

            <label for="password">密码: <span>${requestScope.errors.password}</span></label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="password1">确认密码:</label>
            <input type="password" id="password1" name="password1" required placeholder="确认密码">
        </div>
        <div class="form-group">

            <label for="userAge">年龄:<span>${requestScope.errors.userAge}</span></label>
            <input type="text" id="userAge" name="userAge" required placeholder="请输入年龄">
        </div>
        <div class="form-group">

            <label for="userSex">性别:<span>${requestScope.errors.userSex}</span></label>
            <input type="text" id="userSex" name="userSex" required placeholder="请输入性别">
        </div>
        <div class="msg">${msg}</div>
        <div class="form-group">
            <input type="submit" value="注册">
        </div>
    </form>
</div>
</body>
</html>